<script setup>
import { ref } from 'vue'
import { ElCard, ElRow, ElCol, ElButton } from 'element-plus'
import { User as UserIcon, Document, DataLine, Calendar } from '@element-plus/icons-vue'
</script>

<template>
  <div class="content-wrapper">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>首页</h2>
      <div class="page-actions">
        <el-button type="primary" size="small">新增</el-button>
        <el-button size="small">导入</el-button>
        <el-button size="small">导出</el-button>
      </div>
    </div>
    
    <!-- 内容卡片 -->
    <div class="dashboard-content">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="6">
          <el-card class="stats-card" shadow="hover">
            <div class="stats-content">
              <div class="stats-number">1,280</div>
              <div class="stats-label">总用户数</div>
            </div>
            <div class="stats-icon">
              <el-icon><UserIcon /></el-icon>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
          <el-card class="stats-card" shadow="hover" style="border-left: 4px solid #67c23a;">
            <div class="stats-content">
              <div class="stats-number">268</div>
              <div class="stats-label">今日订单</div>
            </div>
            <div class="stats-icon">
              <el-icon><Document /></el-icon>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
          <el-card class="stats-card" shadow="hover" style="border-left: 4px solid #e6a23c;">
            <div class="stats-content">
              <div class="stats-number">¥36,892</div>
              <div class="stats-label">今日销售额</div>
            </div>
            <div class="stats-icon">
              <el-icon><DataLine /></el-icon>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
          <el-card class="stats-card" shadow="hover" style="border-left: 4px solid #f56c6c;">
            <div class="stats-content">
              <div class="stats-number">32</div>
              <div class="stats-label">待处理事项</div>
            </div>
            <div class="stats-icon">
              <el-icon><Calendar /></el-icon>
            </div>
          </el-card>
        </el-col>
      </el-row>
      
      <el-row :gutter="20" class="mt-4">
        <el-col :xs="24" :md="12">
          <el-card class="content-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>销售趋势</span>
              </div>
            </template>
            <div class="chart-placeholder">销售趋势图表区域</div>
          </el-card>
        </el-col>
        <el-col :xs="24" :md="12">
          <el-card class="content-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>用户增长</span>
              </div>
            </template>
            <div class="chart-placeholder">用户增长图表区域</div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style scoped>
.content-wrapper {
  height: 100%;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.page-header h2 {
  margin: 0;
  color: #303133;
  font-size: 1.25rem;
}

.page-actions {
  display: flex;
  gap: 10px;
}

.dashboard-content {
  height: calc(100% - 60px);
}

.stats-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-left: 4px solid #409eff;
}

.stats-content {
  flex: 1;
}

.stats-number {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.stats-label {
  font-size: 14px;
  color: #909399;
}

.stats-icon {
  font-size: 32px;
  color: #409eff;
  opacity: 0.6;
}

.mt-4 {
  margin-top: 20px;
}

.content-card {
  height: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-placeholder {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f7f8fa;
  border-radius: 4px;
  color: #909399;
}
</style>